<template>
  <page-scroll :footer="true">
        <template #bg>
            <div class="bg"></div>
        </template>
        <template #header>
            <gltitle :title="title"
                     :is_name="true"
                     :is_back="true"
                     :is_lang="false"
                     :is_kf="false"
            ></gltitle>
        </template>
        <template #content>
  
        <div class="container">
            <div class="box">
                <div class="user">
                    <div class="pic">
                        <img src="../../assets/images/img_del.png" alt=""/>
                    </div>
                    <div class="n">{{ $t('page3.doc96') }} {{ userInfo.nickname }} {{ $t('page3.doc97') }}</div>
                    <div class="info">
                        <div class="p1">
                            {{ $t('page3.doc98') }}：
                        </div>
                        <div class="p1 p2">
                            {{ $t('page3.doc99') }}
                            <span>{{ $t('page3.doc100') }}</span>
                        </div>
                    </div>

                </div>
                
            </div>
        </div>


        </template>
      <template #footer>
          <div class="bot">
              <div>
                  <span>{{ $t('page3.doc101') }}</span>
                  <button class="btn" @click="onBtn()">{{ $t('page3.doc93') }}</button>
              </div>
          </div>
      </template>
  </page-scroll>

</template>
<script>
  import { mapActions } from "vuex";

  export default {
  
    data() {
      return {
        title:this.$t('title.doc50'),
        userInfo: [],
      };
    },
    created(){
        this.getuser();
    },
    mounted() {},
    methods: {
        ...mapActions(["resetVuex"]),
        onBtn(){
            this.$post(this.URL.user.cancel).then((res) => {
                if (res.code == 0) {
                    this.quit();
                    this.$toast(res.message);
                }else{
                    this.$toast(res.message);
                }
            });
        },
        // 用户信息
        getuser(){
            this.$post(this.URL.member.personal, {}).then((res) => {
                if (res.code == 0) {
                    this.userInfo = res.data
                } else {

                }
            });
        },
        quit(){
            this.resetVuex()
            this.$toast(this.$t('page3.doc94'))
            this.path_url('/user/login')
        },
        path_url(url) {
            this.$router.push({
                path: url,
                query: {},
            });
        },
    },
};
</script>
  
<style lang="less" scoped>
    .home{
        font-family: PingFang SC;
        font-weight: 500;
    }
    .bot{
      padding: .26rem;
      text-align: center;
        div{
            span{
                color: #ABABB3;
                font-size: .24rem;
                margin-bottom: .34rem;
                display: inline-block;
                opacity: .6;
            }
        }
        
    }
    .btn {
        font-size: .28rem;
        background: var(--backgroundLinear);
    }
    .user{
        text-align: center;
      padding-top: .6rem;
        .pic{
            width: 1.98rem;
            height: 1.98rem;
            border-radius: 50%;
            display: inline-block;
            img{
              width: 2.5rem;
              height: 1.98rem;
              flex-shrink: 0;
            }
            .icon{
                width: .48rem;
                height: .48rem;
                margin-top: -0.2rem;
            }
        }
        .n{
            color: #ffffff;
            font-weight: 600;
            font-size: .36rem;
            margin-top: 0.32rem;
            margin-bottom: 0.52rem;
        }
      .info {
        border-radius: 0.16rem;
        background: rgba(255, 255, 255, 0.08);
        padding: .24rem;
      }
        .p1{
            color: #ffffff;
            font-size: .28rem;
            text-align: left;
            margin-bottom: .24rem;
            line-height: .44rem;
            span{
                color: #FF4242;
            }
        }
      .p2 {
        color: rgba(255, 255, 255, 0.6);
      }
    }
</style>